import React, {Component} from 'react'
import {Button, FormControl, Icon, Popconfirm, Select, Table, Checkbox} from 'tinper-bee';
import './index.less'
import CommonModal from './../../components/CommonModal/index.jsx';
import {vendorsDanger as danger, vendorsGetUrlParam as getUrlParam} from '../../utils/config'
import {getWorkKeyDataUrl, getWorkQualityDeleteDateUrl, queryPicturesName} from '../WorkType/worktype.config'
import App from "../../layout/App";
import UploadPictures, { getPicturesFromOSS } from "./../WorkQuality/UploadPictures.jsx";

export default class WorkQualityItem extends Component{
    constructor(props){
        super(props);
        this.state={
            key:'',
            param:'',
            itemData:'',
            usedModal:false,
            showDeleteModal:false,
            defaultData:[
                {
                    key:'0',
                    number:'001',
                    checkItem:'i',
                    checkDescription:'d',
                    needPhoto:'f',
                    needMeasurement:'m',
                    operation:'删除'
                }],
            buildData:[],
            columns:[
                {
                    title: "序号",
                    dataIndex: "checkcode",
                    key: "checkcode",
                    width: "50px",
                },
                {
                    title: "检查项名称",
                    dataIndex: "checkItem",
                    key: "checkItem",
                    width: "200px",
                    render: (text, record, index) => {
                        return record.checkitem
                    }
                },
                {
                    title: "检查项描述",
                    dataIndex: "checkDescription",
                    key: "checkDescription",
                    width: "300px",
                    render: (text, record, index) => {
                        return record.checkdescription
                    }
                },
                {
                    title: "需要拍照",
                    dataIndex: "needPhoto",
                    key: "needPhoto",
                    width: "100px",
                    render: (text, record, index) => {
                        return <Checkbox
                            disabled
                            checked={record.needphoto}
                        />
                    }
                },
                {
                    title: "需要测量数据",
                    dataIndex: "needMeasurement",
                    key: "needMeasurement",
                    width: "100px",
                    render: (text, record, index) => {
                        return <Checkbox
                            disabled

                            checked={record.needmeasurement}
                        />
                    }
                },
                {
                    title: "示例照片",
                    dataIndex: "templatephoto",
                    key: "templatephoto",
                    width: "100px",
                    render: (text, record, index) => {
                        return <div >
                            {record.examplePictures && record.examplePictures.length >0? 
                                <span  onClick={()=>{this.handleModalStatus(true, record, index)}}  style={{ color: '#2c7edc', cursor: 'pointer' }}>查看</span>
                                :
                                null
                            }
                        </div>
                    }
                },
            ],
            uploadModal : false,
            fileInfoArr :[],
            currRowIndex :0,
            defaultDataForPic:[]
        }
    }

    handleModalStatus = (status, record, index) =>{
        if(status === false){
            this.setState({
                uploadModal:status,
            })
        }else{
            let data = record.examplePictures;
            let tempOSSPictureIndex =[]
            data.map((item, index)=>{
                tempOSSPictureIndex[index] = index;
            })
            getPicturesFromOSS.call(this, data, tempOSSPictureIndex, ()=>{
                this.setState({
                    uploadModal:status,
                })
            })
        }
    }

    componentDidMount(){
        let url=window.location.href;
        let param=getUrlParam(url);
        this.setState({param,key:param.key},()=>{
            let key=this.state.key;
            let pa = {"pkWorkquality": key,ieStamp:new Date().getTime(),isAjax:1};
            getWorkKeyDataUrl(pa).then((res)=>{
                let data=res.data;
                if (data.resultCode !=='busi_ex'){
                    this.saverRenderData(data.result)
                } else {
                    danger({'text':data.exMsg})
                }
            })
        })
    }

    saverRenderData=(itemData)=>{
        let buildData=itemData.itemtabledata;
        this.setState({itemData,buildData});
    };
    onDeleteModalClose=()=>{
        this.setState({
            showDeleteModal: false
        });
    };
    onUsedModalClose=()=>{
        this.setState({
            usedModal: false
        });
    };
    onOpenModalClose=()=>{
        if (this.state.itemData.used){
                this.setState({
                    usedModal: true,
                });
            }else{
                this.setState({
                    showDeleteModal: true
                });
            }
    };
    closeUsedModal=()=>{
        this.setState({
            usedModal: false,
        });
    };
    onDeleteTableItem=()=>{
        this.setState({
            showDeleteModal: false
        });
        let deleteChooseItem=this.state.itemData;
        this.getWorkQualityDeleteDate({...deleteChooseItem,ieStamp:new Date().getTime(),isAjax:1})
    };
    getWorkQualityDeleteDate=(param)=>{
        getWorkQualityDeleteDateUrl(param).then((res)=>{
            let data=res.data;
            let {key,start,size}=this.state.param;
            if (data.resultCode !=='busi_ex'){
                window.location.href=`/workquality.html?start=${start}&size=${size}`
            } else {
                danger({'text':data.exMsg})
            }
        })
    };
    handleJumpEdit=()=>{
        let {key,start,size}=this.state.param;
        window.location.href=`/workqualityedit.html?key=${key}&start=${start}&size=${size}`
    };

    render(){
        let {checkname,checktype,procedurename}=this.state.itemData;
        if (checktype==0){
            checktype='一般检查'
        } else if (checktype == 1) {
            // checktype='现场验收'
        } else if (checktype == 2) {
            checktype = '平行检验'
        } else if (checktype == 3) {
            checktype = '旁站检查 '
        } else if (checktype == 5) {
            checktype = '综合验收 '
        } else if (checktype == 6) {
            checktype = '开工条件'
        } else if (checktype == 7) {
            checktype = '阶段验收'
        } else {
            checktype = '巡查'
        }
        return (
            <App>
            <div className='qualityItem-containers' >
                <div className='containers_top '>
                    <div className='top-header clearfix'>
                        <h4 className='top-header__title'>质量标准</h4>
                        {/* <Button className='top-header__btn' colors="primary" onClick={this.handleJumpEdit}>编辑</Button> */}
                        {/* <Button onClick={this.onOpenModalClose}>删除</Button> */}
                        <div className='bottom_bottom'>
                            <div className='btn_group'>
                                <Button bordered className="" onClick={()=>{
                                    let {start,size}=this.state.param;
                                    window.location.href=`/workquality.html?start=${start}&size=${size}`
                                }}>返回</Button>
                            </div>
                        </div>
                        <CommonModal show={this.state.showDeleteModal}
                                     cancel={this.onDeleteModalClose}
                                     confirm={this.onDeleteTableItem}
                                     content={''}
                                     backdrop={false}
                                     bindCancel={true}
                        />
                        <CommonModal show={this.state.usedModal}
                                     cancel={this.onUsedModalClose}
                                     confirm={this.closeUsedModal}
                                     content={'该信息被引用无法删除'}
                                     backdrop={false}
                                     oneButton={true}
                        />
                    </div>
                    <div className='top-header-searchGroup clearfix'>
                        <div className='top-header-searchGroup__searchOne top-header-searchGroup__searchOne--searchFrist'>
                            <div className='top-header-searchGroup__leftFont'>
                                <span className='top-header-searchGroup__leftFlag'>*</span>
                                名称
                            </div>
                            <FormControl className='top-header-searchGroup__buildSearch' value={checkname} disabled onChange={this.onChange}/>
                        </div>
                        <div className='top-header-searchGroup__searchOne top-header-searchGroup__searchOne--searchSecond'>
                            <div className='top-header-searchGroup__leftFont'>
                                <span className='top-header-searchGroup__leftFlag'>*</span>
                                类别
                            </div>
                            <FormControl className='top-header-searchGroup__buildSearch' disabled  value={checktype}/>
                        </div>
                        <div className='top-header-searchGroup__searchOne' style={{position:'relative'}}>
                            <div className='top-header-searchGroup__leftFont'>工序</div>
                            <FormControl value={procedurename} disabled  className='top-header-searchGroup__buildSearch'/></div>
                    </div>
                </div>
                <div className='containers_bottom'>
                    <div className='bottom_top clearfix'>
                        <div className='title_left'>
                            <span className='blue_flag'></span>
                            <span>检查项列表</span>
                        </div>
                    </div>
                    <div className='bottom_center'>
                        <Table
                            bordered
                            data={this.state.buildData}
                            columns={this.state.columns}
                        />
                    </div>
                </div>
                <UploadPictures 
                    showModal={this.state.uploadModal} 
                    currentRowIndex = {this.state.currRowIndex}  
                    close={()=>{this.handleModalStatus(false)}}
                    status = {'browse'}
                    fileInfoArr = {this.state.fileInfoArr}
                    defaultDataForPic = {this.state.defaultDataForPic}
                />
                </div>
            </App>
        )
    }
}